<template>
  <div class="Informationall">
    <!--    <el-table
            v-loading="loading"
            :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
            type="index"
            style="width: 100%">-->
    <el-table style="width: 100%;"
              :data="tableData"
              hide-on-single-page="true"
    >
      <el-table-column type="index">
      </el-table-column>
      <el-table-column
          label="管理员头像"
          prop="img">
        <!--        <img v-bind:src="tableData[0].aimg" style="width: 100px;height: 100px">-->
        <template slot-scope="props">
          <el-image
              style="width: 100px; height: 100px"
              :src="props.row.aimg"
          >
          </el-image>
        </template>
      </el-table-column>
      <el-table-column
          label="管理员添加时间"
          prop="acreate">
      </el-table-column>
<!--      <el-table-column-->
<!--          label="管理员姓名"-->
<!--          prop="username">-->
<!--      </el-table-column>-->
      <el-table-column
          label="管理员昵称"
          prop="anickname">
      </el-table-column>
      <el-table-column
          label="管理员性别"
          prop="asex">
      </el-table-column>
      <el-table-column
          label="管理员电话"
          prop="aphone">
      </el-table-column>
      <el-table-column
          label="管理员邮箱"
          prop="aemai">
      </el-table-column>
      <el-table-column
          align="right">
        <template slot="header" slot-scope="scope">
          <el-input
              prefix-icon="el-icon-search"
              v-model="search"
              :clearable="true"
              @blur="blurser"
              size="mini"
              v-on:keyup.enter.native="submit"
              placeholder="输入用户名搜素"/>
        </template>
        <template slot-scope="scope">
          <el-button @click="drawer = true;handleEdit(scope.$index, scope.row)"
                     type="primary"
                     size="mini"
                     style="margin-left: 16px;">
            修改
          </el-button>
          <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">注销
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="pagesize"
        layout="total, prev, pager, next, jumper"
        :total="total">
    </el-pagination>

    <el-drawer
        title="修改信息"
        :visible.sync="drawer"
        :with-header="true">
      <el-form :model="ruleForm" status-icon ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="管理员头像">
          <el-upload
              :action="url"
              list-type="picture-card"
              :on-success="susses"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove">
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="管理员昵称" prop="nickName">
          <el-input v-model="ruleForm.anickname"></el-input>
        </el-form-item>
        <el-form-item label="管理员密码" prop="password">
          <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="管理员性别" prop="resource">
          <el-radio-group v-model="ruleForm.asex">
            <el-radio label="男"></el-radio>
            <el-radio label="女"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="管理员电话" prop="phone">
          <el-input v-model="ruleForm.aphone"></el-input>
        </el-form-item>
        <el-form-item label="管理员邮箱" prop="email">
          <el-input v-model="ruleForm.aemai" type="emil"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm(ruleForm)">提交</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>

<script>
import index from "./Index"
import axios from "axios";

export default {
  data() {
    return {
      url: window.g.baseURL + "/file/upload",
      total: 0, // 总条数
      currentPage: 1, //初始页
      pagesize: 10, //每页的数据
      dialogImageUrl: '',
      dialogVisible: false,
      ruleForm: {
        acreate: '',
        username: '',
        anickname: '',
        asex: '',
        aphone: '',
        aemai: '',
        aimg: '',
      },
      drawer: false,
      tableData: [
        {
          acreate: '',
          username: '',
          anickname: '',
          asex: '',
          aphone: '',
          aemai: '',
          aimg: '',
        }
      ],
      search: '',
      loading: false,
      query: {
        pageNum: 1,
        pageSize: 10,
        name: ''
      }
    }
  },
  mounted() {
    this.getTableData();
  },
  methods: {
    // 模糊查询
    submit: function () {
      // this.search // 文本框内容
      this.$http.get("rjbAdmin/likeAll?username=" + this.search)
          .then(res => {
            if (res.status === 200) {
              this.tableData = res.data;
            }
          })
          .then(error => {
            console.log("error -> ")
            console.log(error);
          });
    },
    // 判断查询框内是否有内容
    blurser: function () {
      if (this.search.length < 0 || this.search === null || this.search === ' ') {
        this.getTableData();
      }
    },
    // 初始页currentPage、初始每页数据数pagesize和数据data
    // 切换页面展示数据条数时触发
    handleSizeChange: function (size) {
      this.pagesize = size; //每页下拉显示数据
      // console.log(this.pagesize)
    },
    handleCurrentChange: function (currentPage) {
      //console.log("currentPage -->" + currentPage);
      this.currentPage = currentPage;
      this.query.pageNum = currentPage;
      this.getTableData()
      //console.log(this.currentPage)  //点击第几页
    },
    getTableData() {
      if (this.tableData.length <= 0) {
        this.loading = true;
      } else {
        this.loading = false;
      }
      this.$http.post('rjbAdmin/allList', JSON.stringify(this.query))
          .then(res => {
            let mylist = res.data.list;
            let mylists = [];
            let j = 0;
            for (let i = 0; i < mylist.length; i++) {
              if (mylist[i].username == "admin" || mylist[i].username == "root") {
                continue;
              }
              mylists[j] = mylist[i];
              j++;
            }
            this.tableData = mylists;
            this.total = mylist.length === res.data.total ? res.data.total : res.data.total - 2;
            this.loading = false;
            //console.log("列表数据 --> ")
            //console.log(this.tableData);
          })
          .catch(error => {
            console.log(error);
            this.loading = false;
          });
    },
    // 修改
    handleEdit(index, row) {
      this.getTableData();
      this.ruleForm = row;
    },
    // 删除
    handleDelete(index, row) {
      //console.log(index, row);
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        let id = row.aid;
        this.$http.get("rjbAdmin/deleteOne?id=" + id)
            .then(data => {
              if (data.data) {
                this.susses("删除成功")
                this.getTableData();
              } else {
                this.delete1();
              }
            })
            .catch(error => {
              console.log(error);
              this.delete1();
            });
      }).catch(() => {
        this.delete1();
      });

    },
    susses(data) {
      // console.log(data);
      // console.log(this.dialogImageUrl);
      this.ruleForm.img = data;
      this.dialogImageUrl = data;
    },
    open1() {
      this.$notify({
        title: '成功',
        message: '添加成功',
        type: 'success'
      });
    },
    failure() { // 添加失败的弹出
      this.$notify.error({
        title: '错误',
        message: '添加失败'
      });
    },
    delete1() {
      this.$notify.error({
        title: '错误',
        message: '删除失败'
      });
    },
    // 图片上传
    handleRemove(file, fileList) {
      // console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    submitForm(ruleForm) {
      ruleForm.aimg = this.dialogImageUrl;
      // if (this.dialogImageUrl != null && this.dialogImageUrl.length > 0) ruleForm.img = this.dialogImageUrl;
      this.$http.post("rjbAdmin/updateOne", JSON.stringify(ruleForm))
          .then(data => {
            if (data.status === 200) {
              this.open1();
              this.drawer = false;
              this.getTableData();
            } else {
              this.failure();
            }
          })
          .catch(error => {
            console.log(error);
            this.failure();
          })
    }
  }
}
</script>

<style>
.Informationall {
  width: 100%;
  min-height: 100%;
  padding: 25px;
  box-sizing: border-box;
}

.Informationall-box {
  width: 100%;
  min-height: 100%;
  border-radius: 5px;
  padding: 15px;
  box-sizing: border-box;
  background: #ffffff;
}

.Informationall-box .el-tabs__nav-scroll {
  justify-content: flex-start !important;
  padding-left: 15px;
  box-sizing: border-box;
}

.Informationall-list {
  width: 100%;
  height: auto;
  padding: 15px;
  box-sizing: border-box;
}
</style>
